/**
 * 首页面
 */
$(function () {
    userCount();
    userMap();
    useTop();
});

function userMap() {
    var myChart = echarts.init(document.getElementById('userMap'));
    var option = {
        backgroundColor: '#232b32',
        title: {
            text: '系统建栈人员分布',
            left: '40%',
            top: '10px',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 16,
                color: '#4ef3c8'
            }
        },
        tooltip: {
            //show: false //不显示提示标签
            formatter: '{b}', //提示标签格式
            backgroundColor: "#0fbfff",//提示标签背景颜色
            textStyle: {color: "#fff"}, //提示标签字体颜色
            type: 'shadow'
        },
        series: [{
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true,//显示省份标签
                    textStyle: {color: "#c71585"}//省份标签字体颜色
                },
                emphasis: {//对应的鼠标悬浮效果
                    show: true,
                    textStyle: {color: "#800080"}
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: .5,//区域边框宽度
                    borderColor: '#009fe8',//区域边框颜色
                    areaColor: "#011a60"//区域颜色
                },
                emphasis: {
                    borderWidth: .5,
                    borderColor: '#009fe8',
                    areaColor: "#FFEC10"
                }
            },
            data: [
                {name: '西安', selected: true}//福建为选中状态
            ]
        }]
    };

    myChart.setOption(option);
    myChart.on('mouseover', function (params) {
    });
}

function useTop() {
    var useTopId = document.getElementById('useTop');
    var myChart = echarts.init(useTopId);
    var xAxisData = ['员工管理系统', '工资系统', '租户系统', '大数据支撑平台', '仓储管理系统', '学习建栈平台', '资源储备', '组织机构管理', '西安石油大学学生管理系统'];
    var data01 = [];
    var data02 = [];
    for (var i = 9; i < 19; i++) {
        data01.push(Math.round(Math.random() * 500) + 200);
        data02.push(Math.round(Math.random() * 600) + 100);
    }
    var option = {
        backgroundColor: '#232b32',
        tooltip: {
            //show: false //不显示提示标签
            formatter: '{b}', //提示标签格式
            backgroundColor: "#0fbfff",//提示标签背景颜色
            textStyle: {color: "#fff"}, //提示标签字体颜色
            type: 'shadow'
        },
        legend: {
            data: ['线上使用', '线下支撑'],
            top: 18,
            textStyle: {
                fontWeight: 'normal',
                fontSize: 13,
                color: '#a915f3'
            }
        },
        xAxis: {
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        yAxis: [{
            data: xAxisData,
            axisLabel: {
                inside: true,
                textStyle: {
                    color: '#03a9f4'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(96, 236, 236)',
                    type: 'dashed'
                }
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }],
        series: [{
            name: '线上使用',
            type: 'bar',
            stack: '总量',
            barWidth: 12,
            label: {
                normal: {
                    show: true,
                    position: 'right'
                }
            },
            data: [340, 322, 361, 384, 290, 590, 420, 123, 432],
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                        offset: 0,
                        color: 'yellow'
                    }, {
                        offset: 0.4,
                        color: 'green'
                    }, {
                        offset: 0.8,
                        color: 'red'
                    }, {
                        offset: 1,
                        color: 'blue'
                    }])
                }
            }
        }, {
            name: '线下支撑',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'left'
                }
            },
            data: [-120, -132, -101, -134, -190, -230, -210, -123, -432],
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: 'transparent'
                    }, {
                        offset: 0.4,
                        color: 'rgba(169, 110, 61, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(169, 110, 61, 0.7)'
                    }, {
                        offset: 1,
                        color: 'rgba(169, 110, 61, 1)'
                    }])
                }
            }
        }]
    };
    myChart.setOption(option);
    myChart.on('mouseover', function (params) {
    });

}

function userCount() {
    // 基于准备好的dom，初始化echarts实例
    var exam = document.getElementById('exam');
    var myChart = echarts.init(exam);
    // 指定图表的配置项和数据
    var option = {
        backgroundColor: '#232b32',
        title: {
            text: '请求数',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 13,
                color: '#4ef3c8'
            },
            left: '6%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { //坐标轴指示器，坐标轴抽法有效
                lineStyle: {
                    color: '#57617B'
                },
                type: 'shadow'
            }
        },
        legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: ['登录', '传输', '审核'],
            right: '4%',
            textStyle: {
                fontSize: 12,
                color: '#F1F1F3'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: ['2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12', '2017-1', '2017-2', '2017-3', '2017-4']
        }],
        yAxis: [{
            type: 'value',
            name: '单位（%）',
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        }],
        series: [{
            name: '传输',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(137, 189, 27, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(137, 189, 27, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(137,189,27)',
                    borderColor: 'rgba(137,189,2,0.27)',
                    borderWidth: 12

                }
            },
            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
        }, {
            name: '登录',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 136, 212, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(0, 136, 212, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(0,136,212)',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12

                }
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
        }, {
            name: '审核',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(219, 50, 51, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(219, 50, 51, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {

                    color: 'rgb(219,50,51)',
                    borderColor: 'rgba(219,50,51,0.2)',
                    borderWidth: 12
                }
            },
            data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
